<template>
  <uni-card>
    <card-header title="车辆验车">
        车牌号：{{info.brand}}
    </card-header>

    <!-- VIN码输入 -->
    <view class="vin-section mb30">
      <view class="section-title">车辆识别码 (VIN)</view>
      <input
        class="vin-input"
        v-model="vinCode"
        placeholder="请输入车辆识别码"
        maxlength="17"
        @confirm="handleSearch"
        
      />
    </view>
    <!-- 历史验车报告 -->
    <view class="history-section mb30" v-if="historyFlag">
        <view class="section-title">历史验车报告</view>
      <view class="report-item">
        <text class="report-date">{{info.time}} {{info.site}}</text>
        <text class="report-detail"
          >{{info.detail}}</text
        >
      </view>
    </view>

    <!-- 本次验车照片 -->
    <view class="photo-section mb30">
      <view class="section-title">本次验车照片</view>
      <view class="photo-grid">
        <!-- 已上传照片 -->
        <view
          v-for="(photo, index) in info.photos"
          :key="index"
          class="photo-item"
          @click="previewPhoto(photo)"
        >
          <image :src="photo" mode="aspectFill" class="photo-image"></image>
        </view>
        <!-- 可上传位置 -->
        <view
          class="photo-item add-btn"
          @click="takePhoto(index)"
        >
        <uni-icons type="plusempty" size="30"></uni-icons>
        </view>
      </view>
    </view>
        <!-- 损伤说明输入框 -->
    <view class="input-section mb30">
        <view class="section-title">新增损伤说明</view>
      <textarea 
        class="damage-input" 
        v-model="damageDescription" 
        placeholder="请输入损伤情况说明"
        auto-height
      ></textarea>
    </view>
    <!-- 提交按钮 -->
    <view class="submit-btn" @click="submitReport">
      <text class="btn-text">提交验车报告</text>
    </view>
  </uni-card>
</template>
<script setup>
import localData from '@/static/mock/inspection.json'; 
import { onMounted, computed, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const info = ref({})
const historyFlag = ref(false)
// VIN码
const vinCode = ref("");
// 已上传照片
const uploadedPhotos = ref([
  "/static/uploaded/photo1.jpg",
  "/static/uploaded/photo2.jpg",
]);

// // 剩余可上传位置
// const remainingSlots = computed(() => {
//   const slots = [];
//   const remaining = 6 - uploadedPhotos.value.length;

//   // 前两个位置使用相机图标
//   for (let i = 0; i < Math.min(2, remaining); i++) {
//     slots.push({ type: "camera" });
//   }

//   // 其余位置使用加号图标
//   for (let i = 0; i < remaining - 2; i++) {
//     slots.push({ type: "add" });
//   }

//   return slots;
// });
const handleSearch=(e)=>{
    if(e.detail.value){
        historyFlag.value = true
    }
}
// 拍照或选择照片
const takePhoto = (index) => {
  uni.chooseImage({
    count: 1,
    sizeType: ["compressed"],
    sourceType: ["camera", "album"],
    success: (res) => {
      const tempFilePaths = res.tempFilePaths;
      // 在实际应用中，这里应该上传到服务器
      uploadedPhotos.value.push(tempFilePaths[0]);
    },
  });
};

// 预览照片
const previewPhoto = (url) => {
  uni.previewImage({
    current: url,
    urls: uploadedPhotos.value,
  });
};
const damageDescription = ref('')

// 提交报告
const submitReport = () => {
  if (!damageDescription.value.trim()) {
    uni.showToast({
      title: '请输入损伤说明',
      icon: 'none'
    })
    return
  }
  
  uni.showToast({
    title: '提交成功',
    icon: 'success'
  })
}
const id = ref("");
onMounted(() => {
  id.value = route.query.id;
  info.value = localData.list[id.value]
});

</script>
<style lang="scss" scoped>
.mb30 {
  margin-bottom: 30rpx;
}
.vin-section {
  margin-top: 30rpx;
}

.vin-input {
  margin-top: 10rpx;
  padding: 20rpx 30rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  background-color: #f9f9f9;
}
.section-title {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
    color: #333;
  }
.history-section {
  .report-item {
    padding: 30rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
  }

  .report-date {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 5rpx;
    display: block;
  }

  .report-detail {
    font-size: 28rpx;
    color: #333;
  }
}

.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap:20rpx
}

.photo-item {
  width: calc(33.333% - 17rpx);
  height: 200rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  overflow: hidden;
  position: relative;
}

.photo-image {
  width: 100%;
  height: 100%;
}

.add-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1rpx dashed #ccc;
}

.add-icon {
  width: 60rpx;
  height: 60rpx;
  opacity: 0.5;
}
.input-section {
  flex: 1;
}

.damage-input {
  min-height: 200rpx;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  background-color: #fff;
  font-size: 28rpx;
  line-height: 1.5;
}

.submit-btn {
  margin: 30rpx 20rpx;
  padding: 25rpx 0;
  background-color: #007AFF;
  border-radius: 10rpx;
  text-align: center;
}

.btn-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
}
</style>
